<template>
    <div class="nav_list">
        <ul class="nav_list_left">
            <li class="list_phone"><a href="#">手机 电话卡</a></li>
            <li class="list_phone"><a href="#">手机 电话卡</a></li>
            <li class="list_phone"><a href="#">手机 电话卡</a></li>
            <li class="list_phone"><a href="#">手机 电话卡</a></li>
            <li class="list_phone"><a href="#">手机 电话卡</a></li>
            <li class="list_phone"><a href="#">手机 电话卡</a></li>
            <li class="list_phone"><a href="#">手机 电话卡</a></li>
            <li class="list_phone"><a href="#">手机 电话卡</a></li>
            <li class="list_phone"><a href="#">手机 电话卡</a></li>
            <li class="list_phone"><a href="#">手机 电话卡</a></li>
        </ul>
        <div class="nav_list_extend">
            <ul>
                <li><a href="#"><img src="images/jiang_img/6AAAA.png" alt=""><span>小米8</span></a></li>
                <li><a href="#"><img src="images/jiang_img/6AAAA.png" alt=""><span>小米8</span></a></li>
                <li><a href="#"><img src="images/jiang_img/6AAAA.png" alt=""><span>小米8</span></a></li>
                <li><a href="#"><img src="images/jiang_img/6AAAA.png" alt=""><span>小米8</span></a></li>
                <li><a href="#"><img src="images/jiang_img/6AAAA.png" alt=""><span>小米8</span></a></li>
                <li><a href="#"><img src="images/jiang_img/6AAAA.png" alt=""><span>小米8</span></a></li>
            </ul>
        </div>
    </div>
</template>
<script>
    export default{
       
    }
</script>
<style scoped>.nav_list{
    width: 230px;
    background-color: rgba(0,0,0,.6);
    position: absolute;
}
.nav_list>.nav_list_left{
    height: 460px;
    display: flex;
    flex-direction: column;
    justify-content:center;
}
.nav_list>.nav_list_left li{
    width: 230px;
    height: 42px;
}
.nav_list>.nav_list_left a{
    display: block;
    color: #fff;
    font-size: 14px;
    padding-left: 30px;
    line-height: 42px;
}
.nav_list>.nav_list_left a:hover{
    background-color: #ff6700;
} 
.nav_list>.nav_list_extend{
    position: absolute;
    display: flex;
    top: 0px; 
    left: 230px;
    background-color: #fff;
    box-shadow: 0 8px 16px rgba(0,0,0,0.18);
}
.nav_list>.nav_list_extend ul{
    height: 460px;
}
.nav_list>.nav_list_extend li{
    width: 265px;
    height: 76px;
    background: #fff;
}
.nav_list>.nav_list_extend a{
    display: block;
    line-height: 40px; 
    padding: 18px 20px;
    position: relative;
}
.nav_list>.nav_list_extend a>img{
    width: 40px;
    height: 40px;
}
.nav_list>.nav_list_extend a span{
    /* display:block; */
    position: absolute; 
    top: 20px;
    left: 65px;
    font-size: 14px;
    color: #333;
    transition: all .2s;
}
.nav_list>.nav_list_extend li:hover span {
    color: #ff6700;
}
</style>
